<template>
    <div>
        <nav-title/>
        <div class="body_bg">
            <el-row>
                <el-col :span="12">
                    <el-form :model="queryForm" :inline="true" class="demo-form-inline">
                        <el-form-item label="所属系统">
                            <sys-select v-model="queryForm.sysCode" @change="handleSysChange()"/>
                        </el-form-item>
                        <el-form-item label="角色名称">
                            <el-input v-model="queryForm.roleName" placeholder="角色名称"></el-input>
                        </el-form-item>
                        <el-form-item label="角色编码">
                            <el-input v-model="queryForm.roleCode" placeholder="角色编码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                            <el-button type="primary" @click="handleSubmit">保存</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="page.records" ref="singleTable" @current-change="handleCurrentChange"
                              highlight-current-row
                              style="width: 100%" border>
                        <el-table-column type="index" class-name="index-table" width="50"/>
                        <el-table-column prop="roleCode" label="角色编码"/>
                        <el-table-column prop="roleName" label="角色名称"/>
                    </el-table>
                    <common-page v-model="page" @change="getData" @current-change="getData"/>
                </el-col>
                <el-col :span="12">
                    <el-tree
                            :data="treeData"
                            show-checkbox
                            node-key="menuId"
                            ref="tree"
                            :default-checked-keys="treeCheckedKeys"
                            :props="treeProps">
                    </el-tree>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import CommonPage from '../../../components/common/CommonPage.vue'
  import NavTitle from '../../../components/common/NavTitle'
  import SysSelect from '../../../components/sys/SysSelect'

  export default {
    components: {
      SysSelect,
      NavTitle,
      CommonPage
    },
    data () {
      return {
        page: {
          current: 1,
          size: 10,
        },
        queryForm: {},
        selectRoleId: '',
        treeData: [],
        treeCheckedKeys: [],
        treeProps: {
          children: 'children',
          label: 'menuName',
          isLeaf:'isLeaf'
        }
      }
    },
    created () {
    },
    methods: {
      getData () {
        let self = this
        Object.assign(self.queryForm, {
          current: self.page.current,
          size: self.page.size
        })
        self.$axios
          .post('roleMenuAction/findRolePage', self.queryForm)
          .then(res => {
            self.page = res.data
          })
      },
      handleCurrentChange (row) {
        let self = this
        if(row == null) return
        self.selectRoleId = row.roleId
        self.$axios
          .post('roleMenuAction/findCheckedKeys', {
            roleId: self.selectRoleId
          })
          .then(res => {
            self.treeCheckedKeys = res.data
            self.getTree()
          })
      },
      getTree () {
        let self = this
        if (!self.queryForm.sysCode) return
        self.$axios
          .post('roleMenuAction/findMenuAllTree', {
            sysCode: self.queryForm.sysCode
          })
          .then(res => {
            self.treeData = res.data
          })
      },
      handleSysChange () {
        if (!this.queryForm.sysCode) return
        this.getData()
        this.getTree()
      },
      handleSubmit () {
        let self = this
        if (self.selectRoleId == '') {
          self.$alert('请选择角色', '提示!')
          return
        }
        // console.log(' self.$refs.tree.getCheckedKeys()', self.$refs.tree.getCheckedKeys().join(','))
        let arr = [...self.$refs.tree.getHalfCheckedKeys(),...self.$refs.tree.getCheckedKeys()]
        self.$axios
          .post('roleMenuAction/saveRoleMenu', {
            roleId: self.selectRoleId,
            menuIds: arr.join(',')
          })
          .then(res => {
            if (res.data.result) {
              self.$message({
                message: '保存成功',
                type: 'success'
              })
            } else {
              self.$message.error(res.data.msg == '' ? '保存出错' : res.data.msg)
            }
          })
      }

    }
  }
</script>
<style lang="scss">
    .el-tree__empty-block {
        border: 1px solid #ebeef5;
    }
</style>